<!DOCTYPE html>
<html>
<head>
  <title>React 实例3 - 输入消息</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

  <script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
  <script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
  <script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>

<body>

  <div class="container">
    <h2 class="text-muted"> React 示例3 - 输入消息 </h2>
    <div id="practice" class="container">
  	
  </div>
</div>

<script type="text/babel">
  // 定义要展示的元素
  class UserMessage extends React.Component {
      constructor(props) {
        super(props);
        this.state = {inputMessage: ""};

        // 绑定
        this.textValueChange = this.textValueChange.bind(this);
      }

      textValueChange(event) {
        this.setState({inputMessage: event.target.value});
      }

      render() {
        const countElement =  <div>
            <div className="container">
                <label className="text-success"> React 获取输入 </label>
                <input type="text" onChange={this.textValueChange} />
            </div>
            
            <div className="container">
                <label className="text-info">收到消息：{this.state.inputMessage}</label>
            </div>

            <div className="container">
                 <label className="text-info">重复消息：{this.state.inputMessage + ",  "  + this.state.inputMessage }</label>
            </div>
   
           </div>;

        return countElement;   

      }


  }



  // 展示在页面
  ReactDOM.render(<UserMessage />, document.getElementById("practice"));


</script>

</body>
</html>